<template>
  <div class="total-box">
    <!-- <div class="title"><div class="text">首页</div></div> -->
    <div class="top">
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_user_count }}</div>
        <div class="top-1-1 top-1-2">用户数量</div>
        <i class="el-icon-user top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_washhouse_count }}</div>
        <div class="top-1-1 top-1-2">洗衣房数</div>
        <i class="el-icon-school top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_washmachine_count }}</div>
        <div class="top-1-1 top-1-2">洗衣机数</div>
        <i class="el-icon-coffee top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_order_count }}</div>
        <div class="top-1-1 top-1-2">订单总数</div>
        <i class="el-icon-document top-1-1 icon1"></i>
      </div>
      <div class="top-1">
        <div class="top-1-1">{{ topList.sum_earnings }}</div>
        <div class="top-1-1 top-1-2">平台收益</div>
        <i class="el-icon-coin top-1-1 icon1"></i>
      </div>
    </div>
    <div class="charts">
      <div class="charts-top">
        <div class="text1">请选择：</div>
        <el-select v-model="value" @change="changeClick">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="charts-top-1">
        <!-- <ve-histogram :data="chartData"></ve-histogram> -->
        <!-- <ve-line :data="chartData" :settings="chartSettings" style="color:blue;"></ve-line> -->
        <ve-line :data="chartData" :settings="chartSettings" v-if="chartData.rows.length!=0"></ve-line>
        <div v-if="chartData.rows.length==0">暂无收益</div>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    //  this.chartSettings = {
    //     stack: { '用户': ['平台收益'] },
    //     area: true,
    //   }
    this.chartSettings = {
      metrics: ['平台收益'],
      dimension: ['dayTime']
    };
    return {
      topList: {},
      chartData: {
        columns: ['dayTime', '平台收益'],
        rows: []
      },
      DataShow: [],
      options: [
        {
          value: '1',
          label: '一月'
        },
        {
          value: '2',
          label: '二月'
        },
        {
          value: '3',
          label: '三月'
        },
        {
          value: '4',
          label: '四月'
        },
        {
          value: '5',
          label: '五月'
        },
        {
          value: '6',
          label: '六月'
        },
        {
          value: '7',
          label: '七月'
        },
        {
          value: '8',
          label: '八月'
        },
        {
          value: '9',
          label: '九月'
        },
        {
          value: '10',
          label: '十月'
        },
        {
          value: '11',
          label: '十一月'
        },
             {
          value: '12',
          label: '十二月'
        }
      ],
      value: '月份'
    };
  },
  methods: {
    changeClick(val) {
      this.chartData.rows=[];
      this.value = val;
      this.currentPage = 1;
      http
        .getMonthData({
          month: this.value
        })
        .then(r => {
          console.log(r);
          this.DataShow = r.data.data;
          console.log(this.DataShow);
          for (var i = 0; i < this.DataShow.length; i++) {
            this.chartData.rows.push({
              dayTime: this.DataShow[i].earnings_time.slice(5, 10),
              平台收益: this.DataShow[i].earnings_money
            });
          }
        });
    }
  },
  mounted() {
    http.topData().then(r => {
      this.topList = r.data;
    });
    http.homeCharts().then(r => {
      console.log(r);
      this.DataShow =r.data.data ;
      console.log(this.DataShow);
      for (var i = 0; i < this.DataShow.length; i++) {
        this.chartData.rows.push({
          dayTime: this.DataShow[i].earnings_time.slice(5, 10),
          平台收益: this.DataShow[i].earnings_money
        });
      }
      console.log(this.chartData.rows);
    });
  }
};
</script>
<style scoped>
.title .text {
  margin-left: 20px;
}
.title {
  font-size: 30px;
  font-weight: bold;
  width: 100%;
  height: 70px;
  border-bottom: 1px solid gainsboro;
  margin-bottom: 30px;
  line-height: 70px;
}
.total-box {
  background-color: white;
  padding-top: 30px;
  margin-top: 10px;
}
.charts-top-1 {
  width: 80%;
  height: 300px;
  margin: auto;
  margin-top: 20px;
}
.text1 {
  margin-left: 20px;
}
.charts-top >>> .el-input__inner {
  width: 150px;
  outline: none;
}
.charts-top {
  width: 100%;
  height: 50px;
  background-color: #f6f6f8;
  display: flex;
  align-items: center;
}
.charts {
  width: 80%;
  height: 450px;
  margin: auto;
  border: 1px solid gainsboro;
  margin-top: 30px;
}
.top-1-1 {
  width: 100%;
  height: 40px;
  font-size: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  color: gray;
}
.top-1-2 {
  height: 30px;
  font-size: 14px;
  color: #4543cb;
  margin: 0;
}
.icon1 {
  font-size: 33px;
  margin-top: 10px;
}
.top {
  width: 90%;
  height: 150px;
  margin: auto;
  display: flex;
  align-items: center;
  background-color: #f6f6f8;
}
.top-1 {
  width: 18%;
  height: 100%;
  border: 1px solid gainsboro;
  border-left: none;
}
.top .top-1:nth-child(1) {
  border-left: 1px solid gainsboro;
}
.top .top-1:nth-child(5) {
  width: 28%;
}
</style>
